<template>
  <my-navigation-bar>关于我们</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
  <view v-if="flag">
    <view class="content" :style="flag?{marginTop: '180rpx'}:''">
      <view class="text-box">
        智能婴儿监护器是为怀孕育儿妈妈打造的必备小程序。为妈妈提供专业的孕育内容，实用的孕育小工具，火爆又有用的母婴话题。
        以全方位的知识与服务帮助妈妈更了解自己，让妈妈成为更好的妈妈。同时，这里提供独家专属的爸爸版，让爸爸与妈妈一起监护，一起成长。
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
    <scroll-view scroll-y="true" class="scroll-box">
     <view class="content" :style="flag?{marginTop: '180rpx'}:''">
       <view class="text-box">
         智能婴儿监护器是为怀孕育儿妈妈打造的必备小程序。为妈妈提供专业的孕育内容，实用的孕育小工具，火爆又有用的母婴话题。
         以全方位的知识与服务帮助妈妈更了解自己，让妈妈成为更好的妈妈。同时，这里提供独家专属的爸爸版，让爸爸与妈妈一起监护，一起成长。
       </view>
     </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
  } from "vue";
 import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
.scroll-box{
  height: 100vh;
}
  .content {
    width: 100%;
    height: 100vh;
    margin-top: 150rpx;
    padding: 60rpx 10rpx;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 38rpx;
    text-indent:2em;
     .text-box {
       padding: 10rpx 50rpx;
       line-height: 60rpx;
    }
  }
</style>
